<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到益万家医院</title>
    <!--element css样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--bootstrap css样式-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!--vue js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--ajax 异步请求-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- element js部分 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        . {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

<div id="app">
    <el-container id="bodys">
        <!--页头-->
        <el-header style="height: 100px">

            <
            <el-row type="flex" class="row-bg" justify="center">
                <el-col :span="6">
                    <div class="grid-content bg-purple"><img src="image/logo.jpg" height="90px"
                                                             style="margin-left: -450px;margin-top: 5px"></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light" style="text-align: center;line-height: 2">
                    <span style="font-size: 40px;color: #030303;"  >
                        益万家综合医院
                    </span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple" style="margin-top:30px;margin-left: 400px">
                        <el-button type="primary" style="position: relative;right: 132px;" @click="findex">返回首页</el-button>
                        <el-button type="success" style="position: absolute;top: 30px;right: 20px;" @click="quit">退出</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <!--页内容-->
        <el-main>
            <!--滚动巨幕-->
            <template>
                <el-carousel :interval="5000" arrow="always" height="600px">
                    <el-carousel-item v-for="img in tupian" :key="img">
                        <template slot-scope="scope">
                            <img :src="img" height="100%" width="1600">
                        </template>
                    </el-carousel-item>
                </el-carousel>
            </template>
            <el-main>
                <div style="margin-top: 50px;margin-bottom: 50px">
                    <!--医院介绍-->
                    <div style="float: left;width: 600px;margin-left: 100px">
                        <a href="/map.html" style="text-decoration: none">医院地址</a>
                        &nbsp;&nbsp; 医疗机构<br>
                        &nbsp;&nbsp;医院（Hospital）一词来自拉丁文，原意为“客人”，因为一开始设立时，是供人避难，还备有休息间，使来者舒适，有招待意图，<br>
                        后来，才逐渐成为满足人类医疗需求，提供医疗服务的专业机构，收容和治疗病人的服务场所。<br>
                        医院是指按照法律法规和行业规范，为病员开展必要的医学检查、治疗措施、护理技术、接诊服务、康复设备、救治运输等服务，<br>
                        以救死扶伤为主要目的的医疗机构，其服务对象不仅包括有症状的病员和伤员，也包括不能自理或活动受限有医疗护理依赖的老年人，<br>
                        法医评定有医疗护理依赖或病情不稳定需要长期康复经常观察检查的重度病伤员或有其他特定的情况和人群，<br>
                        如健康人（如孕妇、产妇、新生儿）以及完全健康的人（如来医院进行体格检查或口腔清洁的人），<br>
                        最初设立时，是供人避难，还备有娱乐节目，使来者舒适，有招待意图，后来，才逐渐成为收容和治疗病人的专门机构。<br>

                    </div>
                    <!--院长帅照-->
                    <div style="float: right;margin-right:300px">
                        <img src="/imgs/docty.jpg" width="200px" height="200px" align="left" border="1px solid red">
                        <a href="doctorMessage.jsp" style="text-decoration:none;left: -194px;
position: relative;
top: 67px">医生详情</a>
                    </div>
                </div>
            </el-main>
            <el-main>
                <!--按钮-->
                <div style="margin-top:50px;margin-bottom: 20px;">
                    <el-link href="/userappoint.jsp" :underline="false" type="primary">
                        <el-button type="primary" icon="el-icon-circle-plus-outline"
                                   style="border-radius: 50%;width: 100px;height: 100px;font-size: 50px;left: -67px;position: relative;"></el-button>
                    </el-link>

                    <el-link  :underline="false" type="primary" @click="fuWuFun">
                        <el-button type="primary" icon="el-icon-thumb"
                                   style="border-radius: 50%;width: 100px;height: 100px;font-size: 50px;position: relative;
left: -26px;"></el-button>
                    </el-link>
                    <el-link href="/newsTopic.html" :underline="false" type="primary">
                        <el-button type="primary" icon="el-icon-position"
                                   style="border-radius: 50%;width: 100px;height: 100px;font-size: 50px;position: relative;
left: 26px;"></el-button>
                    </el-link>
                    <el-link href="/lookfor.jsp" :underline="false" type="primary">
                        <el-button type="primary" icon="el-icon-mobile-phone"
                                   style="border-radius: 50%;width: 100px;height: 100px;font-size: 50px;position: relative;
left: 66px;"></el-button>
                    </el-link>
                    <!--医生动漫图-->
                    <img src="/imgs/flower.jpg" height="400px" width="500px" align="right" style="margin-right: 200px">
                </div>

                <div style="width: 1300px;word-spacing: 50px">
                    <el-link href="userappoint.jsp" :underline="false" type="primary"><h3>预约挂号 </h3></el-link>
                    <el-link href="#" :underline="false" type="primary" ><h3>服务指南 </h3></el-link>
                    <el-link href="/newsTopic.html" :underline="false" type="primary"><h3>医院新闻 </h3></el-link>
                    <el-link href="/lookfor.jsp" :underline="false" type="primary"><h3>结果查询 </h3></el-link>
                </div>
            </el-main>
            <el-main>
                <!-- 主要新闻介绍-->

            </el-main>
            <!--服务指南弹出层-->
            <el-dialog
                    title="提示"
                    :visible.sync="fuWu"
                    width="25%"
                    :before-close="handleClose">

                <el-popover
                        placement="top-start"
                        title="登录注册"
                        width="400"
                        trigger="hover"
                        content="1.点击我们的预约挂号按钮进入用户登录页面进行登录.
                                 2.当然如果您还没有账号的情况下要先进行注册再登录.
                                 3.登录要如实填写您的信息身份证号手机号不要忘记您的账号和密码">
                    <el-button slot="reference">登录注册</el-button>
                </el-popover>
                <br/><br/>
                <el-popover
                        placement="top-start"
                        title="预约挂号"
                        width="400"
                        trigger="hover"
                        content="先点击预约挂号。然后根据您的病情选择相应的科室">
                    <el-button slot="reference">预约挂号</el-button>
                </el-popover>
                <br/><br/>
                <el-popover
                        placement="top-start"
                        title="标题"
                        width="400"
                        trigger="hover"
                        content=" 1.然后您就可以选择空闲的医生进行预约挂号来检查您的病情
                            2.翻医生牌子的时候要记得要描述一下你的病情方便医生给你的检查做准备">
                    <el-button slot="reference">选择医生</el-button>
                </el-popover>
                <br/><br/>
                <el-popover
                        placement="top-start"
                        title="标题"
                        width="400"
                        trigger="hover"
                        content="1.到查询挂号记录中缴费只有缴费医生才会处理信息
                                 2.当然您觉得您没什么大的问题那么可以取消预约医生检查过之后就不能在取消
                                 3.最后的最后康复医院真挚的希望您身体健康">
                    <el-button slot="reference">交钱就行他了</el-button>
                </el-popover>

                <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="fuWu = false">确 定</el-button>
  </span>
            </el-dialog>
        </el-main>
        <!--页未-->
        <el-footer>
            本网站（网站地址）刊载的所有内容，包括文字、图片、音频、视频、软件、程序、以及网页版式设计等均在网上搜集。
        </el-footer>


    </el-container>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            tupian:[
                '/imgs/home1.png',
                '/imgs/home2.jpg',
                '/imgs/home3.jpg',
                '/imgs/home4.jpg',

            ],
            allNews:[],
            fuWu:false,
        },
        created(){
            this.newsInit()
        },
        methods: {
            //退出用户
            quit(){
                axios.get("/login/quit").then(resp=>{
                    if(resp.data.code===21){
                        location.href = "/homepage.html";
                    }
                })
            },
            findex(){
                location.href = "/homepage.html";
            },


            fuWuFun(){
                this.fuWu=true
            },
        },
    })
</script>
<style>

    /*<!--设置页面-->*/
    #bodys {
        width: 100%;
        height: 100%;
    }

    /*设置布局头部*/
    .el-header {
        background-color: #3995A1;
        color: #030303;
        text-align: center;
        margin-top: -5px;
        padding: 0px;
    }

    /*设置布局底部*/
    .el-footer {
        background-color: #3995A1;
        color: #0a0a0a;
        text-align: center;
        padding: 0px;
    }

    /*设置布局身体*/
    .el-main {
        background-color: #FCFAED;
        color: #070707;
        text-align: center;
        padding: 0px;
    }
</style>
<!--滚动巨幕-->
<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: white;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: white;
    }

    /*//显示时按钮样式*/
    .el-button--primary {
        /*//需要更改的按钮类型 type='primary'*/
        background: #3599F5 !important;
        border-color: #3599F5 !important;
    }

    /*//移入时按钮样式 type='primary'*/
    .el-button--primary:hover {
        background: #f80722 !important;
        border-color: #07f87c !important;
        color: #0c59e0 !important;
        opacity: 0.8;
    }
</style>
</body>
</html>